
<{include file="www/header.tpl"}>
<{include file="www/header-base.tpl"}>
<script>
    function payment_weixin(transactionId)
    {
        var index = layer.load(0);

        $.get('/payment/weixin/' + transactionId, function (o) {

            layer.close(index);

            if (o.imgsrc)
            {
                $('#weixin-qrcode-img').attr('src', o.imgsrc);
                layer.open({
                    type: 1,
                    title : false,
                    skin: 'layui-layer-demo', //样式类名
                    shift: 2,
                    content: $('#weixin-qrcode'),
                    area: ['360px', '300px'],
                });
            }
            else
                layer.msg('系统错误，请重试');
        }, 'json');
    }
</script>
<div id="weixin-qrcode" class="hidden">
    <h3 class="title">请使用微信扫描二维码完成支付</h3>
    <img id="weixin-qrcode-img"  src="" class="img">
    <p class="result">支付已完成? 点击<a class="btn" href="/payment/return/<{$transactionId}>">查看支付结果</a></p>
</div>
<!--
<div>
    <p><a href="/payment/alipay/<{$transactionId}>">支付宝支付</a></p>
    <p><a href="javascript:;" onclick="payment_weixin('<{$transactionId}>')">微信扫码支付</a></p>
</div>

 -->

<img src="/resource/www/imgs/pay_img.png" class="pay-img">

<div class="pay-box">

    <h2 class="title">个人信息：</h2>

    <{if $info.userFamily != "" && $info.userName != "" && $info.userGender != ""
    && $info.userAge != "" && $info.userPhone != ""}>
    <div class="userinfo">
        <p class="info">
            <span class="span">姓氏：</span>
            <strong class="strong"><{$info.userFamily}></strong>
            <span class="span" style="margin-left: 80px;">名字：</span>
            <strong class="strong"><{$info.userName}></strong>
        </p>
        <p class="info">
            <span class="span">性别：</span>
            <strong class="strong"><{if $info.userGender == 'm'}>男士<{else}>女士<{/if}></strong>
        </p>
        <p class="info">
            <span class="span">年龄：</span>
            <strong class="strong"><{$info.userAge}></strong>
        </p>
        <p class="info">
            <span class="span">联系电话：</span>
            <strong class="strong"><{$info.userPhone}></strong>
        <!--    <em class="em">交易确认后会给您发送短信通知</em>-->
        </p>
    </div>
    <{else}>
    <form class="create-info" id="create_info">
        <div class="fix">
            <label class="label fix">
                <span class="zhu fix">
                    <em class="span">姓氏</em>
                    <em class="xin">*</em>
                </span>
                <input type="text" name="userFamily" id="userFamily" placeholder="例如：张" class="input">
            </label>
            <label class="label fix">
                <span class="zhu fix">
                    <em class="span">名字</em>
                    <em class="xin">*</em>
                </span>
                <input type="text" name="userName" id="userName" placeholder="例如：明明" class="input">
            </label>
            <label class="label fix">
                <span class="zhu fix">
                    <em class="span">性别</em>
                    <em class="xin">*</em>
                </span>
                <select name="userGender" id="userGender" class="input">
                    <option value="-1">请选择性别</option>
                    <option value="m">男</option>
                    <option value="f">女</option>
                </select>

            </label>
            <label class="label fix">
                <span class="zhu fix">
                    <em class="span">年龄</em>
                    <em class="xin">*</em>
                </span>
                <input type="hidden" name="uid" value="<{$uid}>"/>
                <select name="userAge" id="userAge" class="input">
                    <option value="-1">请选择年龄</option>
                    <option value="70后">70后</option>
                    <option value="80后">80后</option>
                    <option value="90后">90后</option>
                    <option value="00后">00后</option>
                </select>
            </label>
            <label class="label fix">
                <span class="zhu fix">
                    <em class="span">联系电话</em>
                    <em class="xin">*</em>
                </span>
                <select name="code" id="userAge" class="input" style="width: 120px; margin-right: 10px">
                    <option value="+86">中国(+86)</option>
                    <option value="+33">法国(+33)</option>
                </select>
                <input type="text" name="userPhone" id="userPhone" placeholder="例如：188xxxxxxxx" class="input">
                <!--<em class="tis">交易确认后会给您发送短信通知</em>-->
            </label>
        </div>
        <span id="msg"></span>
        <input type="button" onclick="ajax_form()" value="保存个人信息" class="submit">
    </form>

    <{/if}>


    <h2 class="title" style="margin-top: 20px;">支付方式：</h2>

    <div class="pay-cse">
        <div class="fix">
            <label>
                <input type="radio" name="pay" value="alipay" id="" class="input">
                <img src="/resource/www/imgs/alipay_icon.png" alt="" class="img">
            </label>
            <label>
                <input type="radio" name="pay" value="weixin" id="" class="input">
                <img src="/resource/www/imgs/wechat_pay.png" alt="" class="wechat">
            </label>
        </div>
        <span id="msg_pay"></span>
        <input type="button" onclick="pay_type()" value="去支付" class="submit">
    </div>
</div>

<script>
    function pay_type(){
        var pay_type = $("input[name='pay']:checked").val();
        if(typeof(pay_type) == 'undefined' ){
            // $("#msg_pay").html("请选择一种支付方式");
            layer.msg('请选择一种支付方式');
            return false;
        }

        <{if $info.userFamily == "" || $info.userName == "" || $info.userGender == ""
        || $info.userAge == "" || $info.userPhone == ""}>
        layer.msg('请保存个人信息');
        return false;
        <{/if}>

        if(pay_type == 'weixin'){
            payment_weixin('<{$transactionId}>')
        }else{
            var url = '/payment/alipay/<{$transactionId}>';
            location.href = url;
        }

    }

function ajax_form(){

    if (!$.trim( $("#userFamily").val() )) {
        layer.msg('姓氏不能为空');
        return false;
    }

    if(!$.trim( $("#userName").val() )){
        layer.msg('名字不能为空');
        return false;
    }
    var gender = $("#userGender").val();
    if(gender == -1){

        layer.msg('请选择性别');
        return false;
    }
    var age = $("#userAge").val();
    if(age == -1){
        layer.msg('请选择年龄范围');
        return false;
    }


    var data = $("#create_info").serialize();

    $.ajax({
        type : "post",
        url : "/user/add_info",
        data : data,
        success : function(response) {
            var obj = JSON.parse(response);
            if(obj.status == 0){
                window.location.reload();
            }else{
                alert(obj.msg);
            }
        }
    });
}

</script>


<{include file="www/footer.tpl"}>
